<template>
  <div class="serviceHeader">
    <div class="breadcrumbs">
      <div class="container">
        <a href="/">首页</a> <span class="sep">/</span> <span>售后服务详情</span>
      </div>
    </div>
    <div class="container">
      <div class="content">
        <div class="service-box service-main-box">
          <div class="service-content-box">
            <div class="box-hd">
              <h1 class="title">售后服务详情</h1>
            </div>
            <div class="box-bd">
              <div style="padding: 20px 0">
                <el-steps :active="active" finish-status="success">
                  <el-step title="选择产品和服务"></el-step>
                  <el-step title="填写申请单"></el-step>
                  <el-step title="完成申请"></el-step>
                </el-steps>
              </div>

              <div class="service-step-box">
                <div class="service-section">
                  <div class="section-hd is-noborder"><h2 class="section-title">选择订单中的商品</h2></div>
                  <div class="section-bd">
                    <div class="xm-goods-list-wrap">
                      <ul class="xm-goods-list service-goods-list clearfix" v-loading="loading">
                        <li v-for="goods in order_goods" :key="goods.productId" class="xm-goods-item">
                          <div class="figure figure-img">
                            <img :src="goods.imgurl">
                          </div>
                          <h3 class="title">{{ goods.productName }}</h3>
                          <p class="imei">SN号：1265****8368</p>
                          <p class="rank"></p>
                          <div class="actions">
                            <!-- 0未售后  1 售后中 2 已售后 3已拒绝 -->
                            <router-link class="btn btn-small btn-primary"
                                         v-if="goods.status == 0"
                                         :to="{
                                            path: '/service',
                                            query:{
                                              orderNo: orderInfo.orderNo,
                                              good_id:goods.productId
                                            }
                                         }"
                            >申请售后
                            </router-link>
                            <router-link class="btn btn-small btn-primary"
                                         v-else
                                         :to="{
                                            path: '/serviceBase/serviceDetail',
                                            query:{
                                              orderNo: orderInfo.orderNo,
                                              good_id:goods.productId
                                            }
                                         }"
                            >查看售后进度
                            </router-link>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>

            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="breadcrumbs">
      <div class="container">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "serviceGoods",
  data() {
    return {
      loading: true,
      active: 1,
      order_goods: {},
      orderInfo: {},
      orderNo: this.$route.query.orderNo
    }
  },
  created() {
    this.getOrderDetail()
  },
  methods: {
    async getOrderDetail() {
      let res = await this.$axios.get('/orders/getOrderDetialByNo', {
        params: {
          'id': this.orderNo,
        }
      })
      this.order_goods = res.itemList
      this.orderInfo = res.orderList
      this.loading = false
    }
  }
}
</script>

<style scoped>
.serviceHeader {
  background: #f5f5f5;
}

.breadcrumbs, .breadcrumbs a {
  color: #757575;
}

.breadcrumbs {
  height: 40px;
  font-size: 12px;
  line-height: 40px;
  background: #f5f5f5;
}

.container {
  width: 1226px;
  margin-right: auto;
  margin-left: auto;
}

.content {
  width: 100%;
}

.service-main-box {
  padding: 36px 0;
}

.service-box {
  background: #fff;
}

.service-content-box {
  margin: 0 120px;
}

.box-hd .title {
  margin: 0;
  font-size: 36px;
  font-weight: 400;
  line-height: 68px;
  color: #b0b0b0;
}

.xm-goods-item .title, .xm-goods-item .title a {
  color: #333;
}

.service-content-box .service-section .section-hd.is-noborder {
  border-left: 0;
}

.service-content-box .service-section .section-hd {
  height: 50px;
  padding: 0 32px;
  margin-bottom: 28px;
  border-left: 2px solid #ff6700;
  background-color: #eee;
  color: #333;
}

.service-content-box .service-section .section-title {
  margin: 0;
  font-size: 16px;
  font-weight: 400;
  line-height: 50px;
}

.xm-goods-list-wrap {
  width: 868px;
  overflow: hidden;
}

.xm-goods-list {
  width: 930px;
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.xm-goods-item {
  float: left;
  width: 260px;
  height: 348px;
  padding-top: 40px;
  padding-right: 48px;
  text-align: center;
}

.xm-goods-item .figure-img {
  width: 200px;
  margin: 0 auto 10px;
}

.xm-goods-item .figure-img img {
  width: 200px;
  height: 200px;
}

.xm-goods-item .title, .xm-goods-item .title a {
  color: #333;
}

.service-goods-list .xm-goods-item .imei {
  margin: 0;
  color: #ff6700;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.xm-goods-item .rank {
  height: 18px;
  margin: 0 0 8px;
  font-size: 12px;
  color: #b0b0b0;
}

/*.xm-goods-item .actions {*/
/*  visibility: hidden;*/
/*  opacity: 0;*/
/*  filter: alpha(opacity=0)\9;*/
/*  font-size: 0;*/
/*  -webkit-transition: opacity .4s;*/
/*  transition: opacity .4s;*/
/*}*/

/*.xm-goods-item .actions .btn {*/
/*  width: 108px;*/
/*  margin: 0 7px;*/
/*  font-size: 12px;*/
/*}*/

/*.btn-primary {*/
/*  background: #ff6700;*/
/*  border-color: #ff6700;*/
/*  color: #fff;*/
/*}*/

.btn-small {
  width: 118px;
  height: 28px;
  font-size: 12px;
  line-height: 28px;
}

.xm-goods-item .title {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

.service-detail img {
  width: 100px;
  height: 100px;
  flex-direction: row;
}

.service-detail li {
  margin-bottom: 5px;
}

.service-content-box .product-detail .detail-list, .service-content-box .product-detail .detail-list dd {
  margin: 0;
}

ul {
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 40px;
}

.service-content-box .service-label-list-large li {
  width: 284px;
  height: 76px;
  margin-right: 15px;
}

.service-content-box .service-label-list li {
  float: left;
  _display: inline;
  width: 160px;
  height: 40px;
  margin: 0 20px 20px 0;
}

/*router-link*/
.service-content-box .service-label-list-large a {
  width: 282px;
  height: 74px;
  font-size: 18px;
  line-height: 74px;
}

/*router-link*/
.service-content-box .service-label-list a {
  display: block;
  width: 158px;
  height: 38px;
  border: 1px solid #b0b0b0;
  font-size: 14px;
  line-height: 38px;
  text-align: center;
  color: #757575;
  cursor: pointer;
}
</style>
